import React, { useState, useEffect } from "react";

import {
  HomeOutlined,
  SettingFilled,
  AppstoreOutlined,
  PieChartOutlined,
  DesktopOutlined,
  ContainerOutlined,
  MailOutlined,
} from "@ant-design/icons";

import Link from "next/link";
import useStore from '../utils/myStore';

import { Menu, Layout } from "antd";
import { Router, useRouter } from "next/router";

const { SubMenu } = Menu;
const { Sider } = Layout;

export default function LeftSider() {

  const {
    userData,
    loading,
    collapsed,
    logout,
    toggle,
    showLoading,
    hideLoading,
    setCurrentPath
  } = useStore();

  const router = useRouter();

  const navData = [
    {
      path: "sysSetting",
      label: "系统设置",
      children: [
        { path: "api", label: "接口管理" },
        { path: "database", label: "数据库配置" },
        { path: "log", label: "日志管理" },
      ],
    },
    {
      path: "basicInfo",
      label: "基础资料",
      children: [
        { path: "userInfo", label: "用户信息" },
        { path: "userRight", label: "用户权限" },
        { path: "departmentInfo", label: "部门信息" },
        { path: "expertInfo", label: "专家信息" },
        { path: "leaderInfo", label: "分管领导信息" },
        { path: "inChargeInfo", label: "负责人信息" },
      ],
    },
    {
      path: "task",
      label: "绩效任务",
      children: [
        { path: "evaluationPlan", label: "考评计划" },
        { path: "assignTask", label: "下达任务" },
        { path: "updateTask", label: "更新任务" },
        { path: "queryTask", label: "查询任务" },
      ],
    },
    {
      path: "performanceEvaluation",
      label: "绩效考评",
      children: [
        { path: "appointExpert", label: "指定专家" },
        { path: "evaluationScore", label: "考评打分" },
        { path: "evaluationStatistic", label: "考评统计" },
      ],
    },
    {
      path: "evaluationPublicity",
      label: "考评公示",
      children: [
        { path: "evaluationResult", label: " 绩效考评结果" },
        { path: "scoreRanking", label: "分数排名" },
        { path: "websiteSetting", label: "网站设置" },
      ],
    },
    {
      path: "statisticalReport",
      label: "统计报表",
      children: [
        { path: "annualPerformanceStatistic", label: "年度绩效统计" },
        { path: "performanceScoreRanking", label: "绩效得分排名" },
        { path: "taskCompletionStatistics", label: "任务完成情况统计" },
        { path: "annualPerformanceTrendAnalysis", label: "年度绩效趋势分析" },
      ],
    },
    {
      path: "comprehensiveChart",
      label: "综合图表",
      children: [
        { path: "chartPerformanceScoreRanking", label: "绩效得分排行榜" },
        { path: "annualPerformanceTrendChart", label: "年度绩效趋势图" },
        { path: "taskProgressTrackingChart", label: "任务进度跟踪图" },
      ],
    },
  ];
  let selectedKeys = [],
    defaultOpenKeys = [];



  useEffect(() => {
    let dirName = "",
    pageName = "",
    paths = router.pathname.split("/");

  navData.forEach((dir) => {
    if (paths[1] && paths[1].indexOf(dir.path) == 0) {
      defaultOpenKeys.push(dir.path);
      dirName = dir.label;
    }
    dir.children.forEach((item) => {
      if (paths[2] && paths[2].indexOf(item.path) == 0) {
        selectedKeys.push(item.path);
        pageName = item.label;
      }
    });
  });
    setCurrentPath([dirName,pageName]);
  }, [])



  if (collapsed) {
    defaultOpenKeys = [];
  }

  return (
    <Sider theme="dark" collapsible collapsed={collapsed} onCollapse={toggle}>
      <Menu
        defaultSelectedKeys={selectedKeys} //{selectedKeys}
        defaultOpenKeys={defaultOpenKeys} //{defaultOpenKeys}
        mode="inline"
        theme="dark"
      >
        <SubMenu key="sysSetting" icon={<SettingFilled />} title="系统设置">
          <Menu.Item key="database">
            <Link href="/sysSetting/database">数据库配置</Link>
          </Menu.Item>
          <Menu.Item key="log">
            <Link href="/sysSetting/log">日志管理</Link>
          </Menu.Item>
          <Menu.Item key="api">
            <Link href="/sysSetting/api">接口管理</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="basicInfo" icon={<AppstoreOutlined />} title="基础资料">
          <Menu.Item key="userInfo">
            <Link href="/basicInfo/userInfo">用户信息</Link>
          </Menu.Item>
          <Menu.Item key="userRight">
            <Link href="/basicInfo/userRight">用户权限</Link>
          </Menu.Item>
          <Menu.Item key="departmentInfo">
            <Link href="/basicInfo/departmentInfo">部门信息</Link>
          </Menu.Item>
          <Menu.Item key="expertInfo">
            <Link href="/basicInfo/expertInfo">专家信息</Link>
          </Menu.Item>
          <Menu.Item key="leaderInfo">
            <Link href="/basicInfo/leaderInfo">分管领导信息</Link>
          </Menu.Item>
          <Menu.Item key="inChargeInfo">
            <Link href="/basicInfo/inChargeInfo">负责人信息</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu key="task" title="绩效任务" icon={<MailOutlined />}>
          <Menu.Item key="evaluationPlan">
            <Link href="/task/evaluationPlan">考评计划</Link>
          </Menu.Item>
          <Menu.Item key="assignTask">
            <Link href="/task/assignTask">下达任务</Link>
          </Menu.Item>
          <Menu.Item key="updateTask">
            <Link href="/task/updateTask">更新任务</Link>
          </Menu.Item>
          <Menu.Item key="queryTask">
            <Link href="/task/queryTask">查询任务</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu
          key="performanceEvaluation"
          title="绩效考评"
          icon={<HomeOutlined />}
        >
          <Menu.Item key="appointExpert">
            <Link href="/performanceEvaluation/appointExpert">指定专家</Link>
          </Menu.Item>
          <Menu.Item key="evaluationScore">
            <Link href="/performanceEvaluation/evaluationScore">考评打分</Link>
          </Menu.Item>
          <Menu.Item key="evaluationStatistic">
            <Link href="/performanceEvaluation/evaluationStatistic">
              考评统计
            </Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu
          key="evaluationPublicity"
          title="考评公示"
          icon={<DesktopOutlined />}
        >
          <Menu.Item key="evaluationResult">
            <Link href="/evaluationPublicity/evaluationResult">绩效考评结果</Link>
          </Menu.Item>
          <Menu.Item key="scoreRanking">
            <Link href="/evaluationPublicity/scoreRanking">分数排名</Link>
          </Menu.Item>
          <Menu.Item key="websiteSetting">
            <Link href="/evaluationPublicity/websiteSetting">网站设置</Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu
          key="statisticalReport"
          title="统计报表"
          icon={<ContainerOutlined />}
        >
          <Menu.Item key="annualPerformanceStatistic">
            <Link href="/statisticalReport/annualPerformanceStatistic">
              年度绩效统计
            </Link>
          </Menu.Item>
          <Menu.Item key="performanceScoreRanking">
            <Link href="/statisticalReport/performanceScoreRanking">
              绩效得分排名
            </Link>
          </Menu.Item>
          <Menu.Item key="taskCompletionStatistics">
            <Link href="/statisticalReport/taskCompletionStatistics">
              任务完成情况统计
            </Link>
          </Menu.Item>
          <Menu.Item key="annualPerformanceTrendAnalysis">
            <Link href="/statisticalReport/annualPerformanceTrendAnalysis">
              年度绩效趋势分析
            </Link>
          </Menu.Item>
        </SubMenu>
        <SubMenu
          key="comprehensiveChart"
          title="综合图表"
          icon={<PieChartOutlined />}
        >
          <Menu.Item key="chartPerformanceScoreRanking">
            <Link href="/comprehensiveChart/chartPerformanceScoreRanking">
              绩效得分排行榜
            </Link>
          </Menu.Item>
          <Menu.Item key="annualPerformanceTrendChart">
            <Link href="/comprehensiveChart/annualPerformanceTrendChart">
              年度绩效趋势图
            </Link>
          </Menu.Item>
          <Menu.Item key="taskProgressTrackingChart">
            <Link href="/comprehensiveChart/taskProgressTrackingChart">
              任务进度跟踪图
            </Link>
          </Menu.Item>
        </SubMenu>
      </Menu>
    </Sider>
  );
}
